package com.example.composableexample.custom.bottom

import android.view.WindowInsets
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel


/**
 * author: LiLiang
 * createTime: 2022/10/8-16:30
 * remark:
 **/

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun BottomSheetDialogPreview() {

    val mainViewModel = viewModel<BottomSheetDialogViewModel>()
    val viewState by mainViewModel.viewState.collectAsState()
    Scaffold(
        modifier = Modifier,
    ) { innerPadding ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues = innerPadding)
        ) {
            Button(modifier = Modifier
                .align(alignment = Alignment.Center),
                onClick = {
                    viewState.onShowRequest()
                }) {
                Text(
                    modifier = Modifier
                        .padding(all = 4.dp),
                    text = "showDialog",
                    fontSize = 16.sp
                )
            }
            BottomSheetDialog(
                modifier = Modifier,
                visible = viewState.visible,
                cancelable = true,
                canceledOnTouchOutside = true,
                onDismissRequest = viewState.onDismissRequest
            ) {
                DialogContent(onDismissRequest = viewState.onDismissRequest)
            }
        }
    }
}

@Composable
private fun DialogContent(onDismissRequest: () -> Unit) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(fraction = 0.7f)
            .clip(shape = RoundedCornerShape(topStart = 14.dp, topEnd = 14.dp))
            .background(color = MaterialTheme.colorScheme.surface),
        verticalArrangement = Arrangement.Center
    ) {
        Button(
            modifier = Modifier
                .align(alignment = Alignment.CenterHorizontally),
            onClick = {
                onDismissRequest()
            }) {
            Text(
                modifier = Modifier.padding(all = 4.dp),
                text = "dismissDialog",
                fontSize = 16.sp
            )
        }
    }
}
